//1.引入Vue
import Vue from 'vue'

// 2.引入VueRouter
import VueRouter from 'vue-router'


// 引入路由组件
import Login from '../pages/Login'
import Home from '../pages/Home'


// 二级路由引入
import Music from '../pages/Home/Music'
import News from '../pages/Home/News'
import Games from '../pages/Home/Games'


// 3,让Vue使用VueRouter这个插件
Vue.use(VueRouter)

// 4.暴露 实例化路由器对象
export default new VueRouter({
    //在实例化路由器对象的配置中,书写路由表配置
    routes: [
        { path: "/login", component: Login, name: 'login' },
        {
            path: "/home",
            component: Home,
            //在某个路由规则中如果有默认子路由,则在当前路由中不再书写name属性
            // name: 'home',
            children: [
                {
                    path: "music/:id/:time?",
                    component: Music,
                    name: "music",
                    props: true
                },
                //1.如果在路由的配置中书写了props配置项,并且值为true,
                //则代表把当前路由表接受的params动态参数
                // 通过props的形式传递给了该组件


                { path: 'news', component: News, name: 'news' },


                {
                    path: 'games',
                    component: Games,
                    name: 'games',
                     //2.在路由表中如果props配置是一个对象,
                    // 则会把对象内的属性一个个通过props传递给当前组件
                    // props: {
                    //     a: 1,
                    //     b: 2,
                    //     c: 3,
                    // }

                    // 3.
                    props:(route)=>{
                        return route.query
                    }
                    //props第三种写法,
                    // props可以是一个函数,函数的参数是当前路由的$route 路由对象
                    // 里面有query的值,有params的值等等,所以我们可以通过route.query拿到数据
                },

            ]
        },
        // 路由重定向01
        /* 通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向 */
        { path: '/', redirect: '/home' }
    ]
})